<template>
    <Row :gutter="24" type="flex" justify="center" align="middle" class="ivu-text-center">
        <Col v-bind="grid" class="ivu-mb">
            <Card :bordered="false" dis-hover class="sky-bg">
                <div class="dashboard-monitor-base-info-number">
                    <Numeral :value="212"/>
                </div>
                <div class="dashboard-monitor-base-info-desc">
                    总治疗人数
                </div>
            </Card>
        </Col>
        <Col v-bind="grid" class="ivu-mb">
            <Card :bordered="false" dis-hover>
                <div class="dashboard-monitor-base-info-number">
                    <Numeral :value="160" />
                </div>
                <div class="dashboard-monitor-base-info-desc">
                    308 治疗人数
                </div>
            </Card>
        </Col>
        <Col v-bind="grid" class="ivu-mb">
            <Card :bordered="false" dis-hover>
                <div class="dashboard-monitor-base-info-number">
                    <Numeral :value="126" />
                </div>
                <div class="dashboard-monitor-base-info-desc">
                    308 购买个数
                </div>
            </Card>
        </Col>
        <Col v-bind="grid" class="ivu-mb">
            <Card :bordered="false" dis-hover>
                <div class="dashboard-monitor-base-info-number">
                    <Numeral :value="209" />
                </div>
                <div class="dashboard-monitor-base-info-desc">
                    308 治疗个数
                </div>
            </Card>
        </Col>
    </Row>
</template>
<script>
    export default {
        data () {
            return {
                grid: {
                    xl: 6,
                    lg: 12,
                    md: 12,
                    sm: 12,
                    xs: 12
                }
            }
        },
        methods: {
        }
    }
</script>
<style lang="less">
    .dashboard-monitor-base-info-number{
        font-size: 28px;
        font-weight: bold;
        margin: 8px 0 4px;
    }
    .dashboard-monitor-base-info-desc{
        color: #808695;
        font-size: 12px;
    }
    .dashboard-monitor-base-info-extra{
        height: 25px;
        margin-top: 10px;
        font-weight: bold;
        font-size: 14px;
        i{
            transform: scale(1.2);
            margin-right: 4px;
        }
        &-up{
            color: #19be6b;
        }
        &-down{
            color: #ed4014;
        }
    }
    .dashboard-monitor-base-info-tip{
        position: absolute;
        top: 10px;
        right: 10px;
        color: #808695;
    }
    .sky-bg {
        background:#e8eaec;
    }
</style>
